import React, { Component } from "react";
import { Card, Tabs } from "antd";
// 引入当前页面的css
import "@/assets/css/login.css";

// 引入密码登录和短信登录对应的组件
import NormalLogin from "./NormalLogin";
import MobileLogin from "./MobileLogin";

const { TabPane } = Tabs;

// 登录页
class Login extends Component {
  render() {
    return (
      <div className="loginBox">
        {/* 白板卡片 */}
        <div className="site-card-border-less-wrapper">
          <Card bordered={false} style={{ width: 300 }}>
            <Tabs
              defaultActiveKey="1"
              tabBarGutter={100}
              centered
              onChange={this.onChange}
            >
              <TabPane tab="密码登录" key="1">
                {/* 密码登录的组件 */}
                <NormalLogin></NormalLogin>
              </TabPane>
              <TabPane tab="短信登录" key="2">
                {/* 短信登录的组件 */}
                <MobileLogin></MobileLogin>
              </TabPane>
            </Tabs>
          </Card>
        </div>
      </div>
    );
  }
  // 切换选项卡事件
  onChange = (key) => {
    console.log(key);
  };
}

export default Login;
